<template>
  <div id="bottom1" stytle="width:100%;height:100%"></div>
</template>

<script>
//引入所需的图表
import { Column } from "@antv/g2plot";
//引入get请求
import { get } from "@/utils/request";
import { log } from '@antv/g2plot/lib/utils';
export default {
  data() {
    return {
      //总数数组
      countData:[]
    }
  },
  async mounted() {
    await this.getCountData()
    await this.initBot1();
  },
  methods: {
    //创建图表
    initBot1() {
      const columnPlot = new Column("bottom1", {
        data: this.countData,
        xField: "type",
        yField: "sales",
        label: {
          // 可手动配置 label 数据标签位置
          position: "middle", // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: "#FFFFFF",
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
            style: {
              //文字颜色
              fill: "white",
            },
          },
        },
        yAxis: {
          label: {
            style: {
              //文字颜色
              fill: "white",
            },
          },
        },
        meta: {
          type: {
            alias: "类型",
          },
          sales: {
            alias: "数量",
          },
        },
      });

      columnPlot.render();
    },
    //获取所有总数数据
    async getCountData(){
      let res = await get('/count/countAll')
      console.log(res.data);
      //对数据的格式进行处理
      this.countData = res.data.map(item => {
        return{
          type: item.type,
          sales: item.value
        }
      })
      console.log(this.countData);
    }
  },
};
</script>

<style scoped>
</style>